<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育比分网</title>
    <!-- Tailwind CSS CDN -->
    <script src="common/js/tailwindcss.js"></script>
    <!-- Lucide Icons -->
    <script src="common/js/lucide.min.js"></script>
    <style>
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        /* 未选中状态 */
        .tab-button {
            background-color: white;
            color: #4B5563; /* text-gray-600 */
            border-color: #E5E7EB; /* border-gray-200 */
        }

        /* 选中状态 */
        .tab-active {
            background-color: #EBF5FF; /* light blue background */
            color: #2563EB; /* text-blue-600 */
            border-color: #2563EB; /* border-blue-600 */
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100">
<!-- 顶部横幅广告 -->
<div id="adBanner" class="bg-blue-600 text-white p-2 text-center relative">
    <p>赞助商广告位置 - 获取最新赛事动态！</p>
    <button
            onclick="document.getElementById('adBanner').style.display='none'"
            class="absolute right-2 top-2 text-white"
    >
        <i data-lucide="x"></i>
    </button>
</div>

<!-- 主导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-20">
    <div class="max-w-7xl mx-auto px-4">
        <!-- 上层导航 - Logo和用户功能区 -->
        <div class="flex justify-between items-center h-16">
            <div class="flex items-center">
                <button onclick="toggleMenu()" class="p-2 rounded-md hover:bg-gray-100">
                    <i data-lucide="menu"></i>
                </button>
                <span class="ml-4 text-xl font-bold">体育比分网</span>
            </div>
            <div class="flex items-center space-x-4">
                <i data-lucide="search"></i>
                <i data-lucide="bell"></i>
                <i data-lucide="user"></i>
            </div>
        </div>

        <!-- 下层导航 - 主要功能区 -->
        <div class="flex items-center space-x-6 h-12 text-gray-600">
            <!-- 主要功能导航 -->
            <a href="/"
               class="flex items-center h-full border-b-2 border-blue-500 text-blue-500 px-1">
                比分直播
            </a>
            <a href="/video/video.html"
               class="flex items-center h-full border-b-2 border-transparent hover:text-blue-500 hover:border-blue-500 px-1">
                <i data-lucide="play" class="w-4 h-4 mr-1"></i>
                视频集锦
            </a>
            <a href="/news/news.html"
               class="flex items-center h-full border-b-2 border-transparent hover:text-blue-500 hover:border-blue-500 px-1">
                <i data-lucide="newspaper" class="w-4 h-4 mr-1"></i>
                新闻资讯
            </a>
        </div>
    </div>
</nav>

<!-- 侧边菜单 -->
<div id="sideMenu" class="fixed inset-0 z-50 invisible">
    <!-- 背景遮罩 -->
    <div id="sideMenuBackdrop"
         class="absolute inset-0 bg-black opacity-0 transition-opacity duration-300"
         onclick="toggleMenu()">
    </div>

    <!-- 菜单内容 -->
    <div id="sideMenuContent"
         class="absolute left-0 top-0 h-full w-80 bg-white shadow-xl transform -translate-x-full transition-transform duration-300">
        <!-- 顶部区域 -->
        <div class="p-6 bg-gradient-to-r from-blue-500 to-blue-600">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">体育比分网</h2>
                <button onclick="toggleMenu()"
                        class="p-2 hover:bg-white/10 rounded-full transition-colors">
                    <i data-lucide="x" class="text-white"></i>
                </button>
            </div>
        </div>

        <!-- 用户信息区域 -->
        <div class="p-4 border-b">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
                    <i data-lucide="user" class="w-6 h-6 text-gray-400"></i>
                </div>
                <div>
                    <div class="text-sm text-gray-600">欢迎访问</div>
                    <button class="text-blue-500 font-medium hover:text-blue-600">
                        登录/注册
                    </button>
                </div>
            </div>
        </div>

        <!-- 菜单列表 -->
        <div class="py-2">
            <!-- 主要功能 -->
            <div class="px-2 py-3">
                <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                    功能导航
                </h3>
                <ul class="mt-2 space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="home" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            首页
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="play" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            视频直播
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="newspaper" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            新闻资讯
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 用户中心 -->
            <div class="px-2 py-3">
                <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                    用户中心
                </h3>
                <ul class="mt-2 space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="user" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="heart" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            我的收藏
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition-colors group">
                            <i data-lucide="settings" class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500"></i>
                            设置
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
            <div class="flex items-center justify-between text-sm text-gray-500">
                <span>版本 1.0.0</span>
                <button class="hover:text-gray-700">帮助中心</button>
            </div>
        </div>
    </div>
</div>

<main class="max-w-7xl mx-auto px-4 py-6">
    <!-- 热门赛事导航 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <a href="ball/football/football.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold flex items-center">
                    <span class="text-2xl mr-3">⚽</span>
                    足球赛事
                </h2>
                <i data-lucide="chevron-right" class="text-gray-400"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">实时比分、赛程、数据统计</p>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">英超</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">西甲</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">德甲</span>
            </div>
        </a>

        <a href="ball/basketball/basketball.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold flex items-center">
                    <span class="text-2xl mr-3">🏀</span>
                    篮球赛事
                </h2>
                <i data-lucide="chevron-right" class="text-gray-400"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">NBA、CBA等篮球赛事直播</p>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">NBA</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">CBA</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">欧篮</span>
            </div>
        </a>

        <a href="ball/baseball/baseball.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold flex items-center">
                    <span class="text-2xl mr-3">⚾</span>
                    棒球赛事
                </h2>
                <i data-lucide="chevron-right" class="text-gray-400"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">MLB、NPB等棒球联赛</p>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">MLB</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">NPB</span>
            </div>
        </a>
    </div>
    <!-- 热门比赛预告 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <a href="hot/index.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold flex items-center">
                    <span class="text-2xl mr-3">🔥</span>
                    比赛预告
                </h2>
                <i data-lucide="chevron-right" class="text-gray-400"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">英超联赛、西甲联赛、意甲联赛、德甲联赛、法甲联赛、冠军等联赛</p>
            <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">Premier League</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">La Liga</span>
                <span class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm">Championship</span>
            </div>
        </a>
    </div>
    <!-- 标签云 -->
    <div class="bg-white rounded-lg shadow p-4">
        <h3 class="text-lg font-bold mb-4">热门标签</h3>
        <div class="flex flex-wrap gap-2">
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">足球</span>
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">篮球</span>
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">网球</span>
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">英超</span>
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">NBA</span>
            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-blue-100 cursor-pointer">ATP</span>
        </div>
    </div>
</main>

<!-- JavaScript -->
<script>
    // 初始化 Lucide 图标
    lucide.createIcons();
    // 菜单切换函数
    function toggleMenu() {
        const menu = document.getElementById('sideMenu');
        const backdrop = document.getElementById('sideMenuBackdrop');
        const content = document.getElementById('sideMenuContent');

        if (menu.classList.contains('invisible')) {
            // 打开菜单
            menu.classList.remove('invisible');
            setTimeout(() => {
                backdrop.classList.add('opacity-50');
                content.classList.remove('-translate-x-full');
            }, 0);
        } else {
            // 关闭菜单
            backdrop.classList.remove('opacity-50');
            content.classList.add('-translate-x-full');
            setTimeout(() => {
                menu.classList.add('invisible');
            }, 300); // 等待过渡动画完成
        }
    }
</script>

</body>

</html>
